<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        /* .box{
            width: 200px;
            height: 200px;
            margin: 50px auto;
            background-color: blueviolet;
        }
         */
         .box1 {
            background-color: aquamarine;
         }

         
    </style>
</head>
<body>
    <div class="box"></div>
    <table border="1" cellspacing="0" cellpadding="50" >
        <thead class="box1">
            <th>编号</th>
            <th>商品名称</th>
            <th>单价</th>
        </thead>
        <tbody>
            <tr >
                <td>01</td>
                <td>牛仔外套</td>
                <td>99元</td>
            </tr>
            <tr >
                <td>02</td>
                <td>帽子</td>
                <td>25元</td>
            </tr>
        </tbody>
        
    </table>
    <script>
        // const box = document.querySelector('.box');
        // box.addEventListener('mousedown',function(){
        //     box.style.backgroundColor = 'deeppink';
        // });
        // box.addEventListener('mouseup',function(){
        //     box.style.backgroundColor = 'pink';
        // })
        const tb = document.querySelector('tbody');
        tb.addEventListener('mouseover',function(evt){
            evt.target.parentNode.style.backgroundColor = 'gray';
        });
        tb.addEventListener('mouseout',function(evt){
            evt.target.parentNode.style.backgroundColor = 'white';
        })
       
    </script>
</body>
</html>